<template>
  <div class="vm-common-search">
    <div class="mint-search">
      <div class="mint-searchbar">
        <div class="mint-searchbar-inner">
          <i class="mintui mintui-search"></i>
          <input
            type="search"
            v-model="value"
            :placeholder="placeholderV"
            class="mint-searchbar-core"
            @input="inputDataChange">
          <mt-button size="small" class="vm-common-search-btn" @click="vmCommonSearch">搜索</mt-button>
        </div>
        <slot name="searchList"></slot>
      </div>
    </div>
    <i class="vm-icon screen"
       :style="isVisible"
       @click="openScreen"></i>
    <vm-common-search-popup
      ref="screenPopup"
      :ScreenData="screenData"
      :type="type"></vm-common-search-popup>
  </div>
</template>

<script>
  import vmCommonSearchPopup from "@/components/vm-common-search-popup";
  import { Search } from "vux";
  export default {
    props: {
      type: {
        type: String
      },
      screen: {
        type: Boolean
      },
      _type: {
        type: String
      },
      placeholderV: {
        type: String,
        default: '请输入公司名称'
      }
    },
    data() {
      return {
        value: "", // 搜索项目
        popupVisible: false,
        requireScreenData: {
          companyType: [
            { value: "全部", isActive: false },
            { value: "本公司", isActive: false, dataType: "myself" },
            { value: "其他公司", isActive: false, dataType: "other" }
          ],
          type: [
            { value: "全部", isActive: false },
            { value: "询价", isActive: false, dataType: "1" },
            { value: "竟比价", isActive: false, dataType: "5" },
            { value: "招投标", isActive: false, dataType: "4" },
            { value: "竞争性谈判", isActive: false, dataType: "2" },
            { value: "单一来源", isActive: false, dataType: "3" }
          ],
          state: [
            { value: "公告期", isActive: false, dataType: "1" },
            { value: "投标期", isActive: false, dataType: "2" },
            { value: "评标期", isActive: false, dataType: "3" },
            { value: "公告期", isActive: false, dataType: "4" },
            { value: "结束期", isActive: false, dataType: "5" }
          ]
        }, // 需求筛选数据
        projectScreenData: {
          industry: [
            { value: "全部", isActive: false },
            { value: "化工", isActive: false, dataType: "化工" },
            {
              value: "电力",
              isActive: false,
              dataType: "电力"
            },
            { value: "石油石化", isActive: false, dataType: "石油石化" },
            { value: "冶金", isActive: false, dataType: "冶金" },
            { value: "更多...", isActive: false }
          ],
          stage: [
            { value: "全部", isActive: false },
            { value: "立项申报", isActive: false, dataType: "立项申报" },
            { value: "手续审批", isActive: false, dataType: "手续审批" },
            { value: "工程设计", isActive: false, dataType: "工程设计" },
            { value: "主设采购", isActive: false, dataType: "主设采购" },
            { value: "土建施工", isActive: false, dataType: "土建施工" },
            { value: "主体安装", isActive: false, dataType: "主体安装" },
            { value: "投产运营", isActive: false, dataType: "投产运营" }
          ],
          datetime: [
            { value: "全部", isActive: false, dataNumber: "0" },
            { value: "今日最近", isActive: false, dataNumber: "1" },
            { value: "最近3天", isActive: false, dataNumber: "3" },
            { value: "最近7天", isActive: false, dataNumber: "7" },
            { value: "最近30天", isActive: false, dataNumber: "30" },
            { value: "最近60天", isActive: false, dataNumber: "60" },
            { value: "最近半年", isActive: false, dataNumber: "180" }
          ],
          companyType: [
            { value: "全部", isActive: false },
            { value: "本公司", isActive: false, dataType: "self" },
            { value: "其他公司", isActive: false, dataType: "other" }
          ]
        }, // 项目筛选数据
        procurementPage: {}, // 统计分析采购分析
        businessScreenData: {
          Procurement: [
            { value: "询价", isActive: false },
            { value: "竞价比", isActive: false },
            { value: "招投标", isActive: false },
            { value: "竞争性谈判", isActive: false },
            { value: "单一来源", isActive: false }
          ],
          stage: [
            { value: "公告期", isActive: false },
            { value: "投标期", isActive: false },
            { value: "采购中", isActive: false },
            { value: "评标期", isActive: false },
            { value: "公告期", isActive: false },
            { value: "结束期", isActive: false }
          ]
        },
        screenData: {},
        startDay: "开始日期", // 筛选开始时间
        endDay: "结束日期", // 筛选结束时间
        companyName: "" // 公司名称
      };
    },
    created() {
      this.getCurrentScreenType();
    },
    mounted() {},
    computed : {
      isVisible () {
        if (!this.screen) {
          return {
            visibility: 'hidden'
          }
        }
      }
    },
    methods: {
      // 输入数据通知给父组件
      messageParentC () {
        this.$emit("messageParentC", this.value);
      },
      // 打开弹框
      openScreen() {
        this.$refs.screenPopup.init(this._type);
      },
      // 获取当前筛选类型，赋值给screenData
      getCurrentScreenType() {
        const type = this.type;
        switch (type) {
          case "projectPage":
            this.screenData = this.projectScreenData;
            break;
          case "requirePage":
            this.screenData = this.requireScreenData;
            break;
          case "procurementPage":
            break;
        }
      },
      vmCommonSearch() {
        this.$root.Bus.$emit('vmCommonSearchV', this.value); // 注意bus传参, 其他地方有用到,不要干掉
        this.$emit("vmSearchV",this.item);
      },
      // 触发输入事件
      inputDataChange () {
        this.$emit('searchList', this.value);
      }
    },
    components: {
      "vm-common-search-popup": vmCommonSearchPopup
    }
  };
</script>

<style lang="scss">
  .vm-common-search {
    display: flex;
    position: relative;
    align-items: center;
    height: 100px;
    width: 100%;
    background-color: #fff;
    .mint-search {
      z-index: 999;
      overflow: inherit;
      flex: 1;
      display: flex;
      height: 100%;
      align-items: center;
      .mint-searchbar {
        padding: 0;
        width: 100%;
        border-radius: 20px; /* no */
        border: 1px solid #dddddd; /* no */
        background-color: #fff;
        margin-left: 40px;
        .mint-searchbar-inner {
          padding: 0;
          height: 55px;
          background: none;
          i.mintui.mintui-search {
            font-size: 28px;
            color: #cccccc;
            padding: 0 10px 0 18px;
            &::before {
              vertical-align: middle;
            }
          }
          .vm-common-search-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 150px;
            height: 55px;
            line-height: 55px;
            border-radius: 20px;
            font-size: 26px;
          }
        }
        .mint-searchbar-cancel {
          margin-right: 10px;
          color: #cccccc;
        }
      }
    }
    i.vm-icon.screen {
      text-align: center;
      margin: 0 29px;
      width: 32px;
      height: 32px;
      background-position: -87px -35px;
      top: 0;
      right: 0;
    }
    .mint-searchbar-core {
      font-size: 28px;
      line-height: 55px;
      vertical-align: middle;
      color: #cccccc;
      background: none;
      height: inherit;
      text-align: left;
      border: 0;
      border-radius: 0;
      width: 100%;
      margin: 0;
      padding: 0;
      -webkit-user-select: text;
      outline: 0;
      -webkit-appearance: none;
    }
  }
</style>
